<template>
  <div class="chat-input__wrapper">
    <input-header :rootNode="rootNode" :isAgentNew="isAgentNew"/>
    <div class="chat-input__area " ref="refTourChatContent" v-show="isDependeceAiVersion">
      <textarea
        class="chat-input"
        ref="refChatInput"
        :value="chatStore.chatInput"
        @input="handleChatInput"
        @keydown.stop="handleKeyDown"
        :placeholder="placeholder"
      />
      <input-footer @send="handleSendChatMessage" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import inputHeader from './input-header.vue'
import inputFooter from './input-footer.vue'
import { invokeAPi, registerInformApi } from '@/xz-fn'
// import cacheSetting from '@/cache-list/cache-setting'
// import useChatDoc from '@/utils/chat-document'
// const homeChatScrollToBottom = inject('homeChatScrollToBottom') as () => void

export default {
  name: 'InputBox',
  components: {
    inputHeader,
    inputFooter
  },
  inject: ['detectIsLogin', 'setIsAgentNew'],
  props: {
    rootNode: {
      type: Object,
      default: () => null
    },
    isAgentNew: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      pageName: 'almanac'
    }
  },
  computed: {
    ...mapGetters(['chatStore', 'appInfo', 'isDependeceAiVersion']),
    placeholder () {
      // if (chatStore.docSummarize.type === 'link') {
      //   return '当前会话无法继续互动，发送内容将打开新对话'
      // }
      return '输入“@”切换模型，shift+enter换行'
    },
    isDisabledSend () {
      return ['chating'].includes(this.chatStore.status)
    }
  },
  mounted () {
    // this.initDragEvents()
    this.$xzReg('Notify_ChatAi', ({ strKey }) => {
      this.setIsAgentNew()
      // console.log('strKey', strKey)
      // eslint-disable-next-line sonarjs/no-duplicate-string
      this.$store.dispatch('chat/setChatStore', { chatInput: strKey })
      this.handleSendChatMessage()
    })
    this.initEvents()
    this.focusWithInput()
    this.initFocusEvent()
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  },
  methods: {
    handleChatInput (e) {
      const target = e.target
      const value = target.value
      const len = value.length
      const lastChat = value[len - 1]
      if (lastChat === '@') {
        const v = value.slice(0, len - 1)
        this.$store.dispatch('chat/setChatStore', { chatInput: v, showModels: 'models' })
        target.value = v
        return
      }
      this.$store.dispatch('chat/setChatStore', { chatInput: target.value })
    },

    // detectSendShotcut (e) {
    //   if (e.key !== 'Enter') return false
    //   const enterSetting = cacheSetting.get('sendShortcut')
    //   if (enterSetting === 'Enter') {
    //     return e.key === 'Enter' && e.shiftKey === false
    //   }
    //   if (enterSetting === 'Crtl+Enter') {
    //     return e.key === 'Enter' && (e.ctrlKey || e.metaKey)
    //   }
    //   return false
    // },
    handleKeyDown (e) {
      if (e.key === 'Enter' && e.shiftKey === false) {
        this.handleSendChatMessage()
        e.preventDefault()
        return false
      }
      return false
    },
    async handleSendChatMessage  () {
      // homeChatScrollToBottom?.()
      // if (this.isDisabledSend) return
      if (!this.detectIsLogin()) return
      const input = this.chatStore.chatInput
      if (!input) return
      await this.$emit('sendMessage', input)
    },

    // const { handlePdfSummrize } = useChatDoc()
    // handleStartPdf (files) {
    //   if (!files) return
    //   if (files.length > 1) {
    //     toast.open('一次只能上传一个文件')
    //     return
    //   }
    //   const file = files[0]
    //   if (file.type !== 'application/pdf') {
    //     toast.open('只支持上传PDF文件')
    //     return
    //   }
    //   handlePdfSummrize(file)
    //   window.__tmp_xz_chat_pdf_file__ = file
    // },
    initDragEvents () {
      const target = this.$refs.refTourChatContent
      if (!target) return
      ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
        target.addEventListener(eventName, preventDefaults, false)
      })

      function preventDefaults (e) {
        e.preventDefault()
        e.stopPropagation()
      }

      // target.addEventListener('drop', handleDrop, false)

      // function handleDrop (e) {
      //   const dt = e.dataTransfer
      //   const files = dt?.files
      //   console.log('123')
      //   this.handleStartPdf(files)
      // }
    },
    initFocusEvent () {
      registerInformApi('Notify_NeedFocus', this.focusWithInput)
    },
    focusWithInput () {
      invokeAPi('SetDlgFocus')
      setTimeout(() => {
        this.$refs.refChatInput && this.$refs.refChatInput.focus()
      }, 1000)
    },
    initEvents () {
      document.addEventListener('visibilitychange', this.visibiltyChange)
    }
  }
}

</script>

<style lang="scss" scoped>
.chat-input__wrapper {
  flex: 0 1 auto;
  padding: 12px 14px 0 14px;
  flex: 0 0 auto;
  // position: absolute;
  // bottom: 0;
  // left: 0;
  // width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.chat-input__area {
  border: 1px solid $border-color-primary;
  border-radius: $border-radius;
  resize: none;
  background-color: rgba($color: #fff, $alpha: 0.1);
  padding: 14px 16px 0 16px;
  box-sizing: border-box;
  height: 140px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba($color: #2FC670, $alpha: 0.3);
  box-shadow: 0px 0px 20px 0px #2FC6701A;
  position: relative;
  margin-bottom: 20px;
  &:hover {
    border-color: rgba($color: #2FC670, $alpha: 0.6);
  }
}
.chat-input__scroll {
  flex: 1 1 100%;
}
.chat-input {
  border: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  resize: none;
  outline: none;
  flex: 1 1 100%;
  color: $color-white ;
  font-size: 14px;
  &::-webkit-input-placeholder {
    color: rgba($color: $color-white , $alpha: 0.5);
  }
}

</style>
